import React from "react";
import cn from "classnames";
import IconBox from "./IconBox";
import TodoContent from "./TodoContent";
import dayjs from "dayjs";

interface IProp {
  data: ITodo;
  onFinish: () => void;
  onDelete: () => void;
}

export default function TodoItem(props: IProp) {
  const { content, finished, ctime } = props.data;
  const { onFinish, onDelete } = props;
  const styleObj = {
    "task-element": true,
    "task-finished": finished,
  };
  return (
    <div className={cn(styleObj)}>
      <IconBox onClick={onFinish} className="icon-checkbox" />
      <TodoContent
        title={content}
        time={dayjs(ctime).format("MM月DD日 HH:mm:ss").toString()}
      />
      <IconBox onClick={onDelete} className="icon-delete" />
    </div>
  );
}
